<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人资料 - 数据库教学系统</title>
  <link rel="stylesheet" href="/src/style.css">
  <link rel="stylesheet" href="/node_modules/@fortawesome/fontawesome-free/css/all.min.css">
</head>
<body class="bg-gray-50">
  <div class="min-h-screen flex">
    <!-- 侧边栏 -->
    <aside class="w-64 bg-white shadow-md">
      <div class="p-4 border-b border-gray-200">
        <h2 class="text-xl font-bold text-gray-800">数据库教学系统</h2>
      </div>
      <nav class="p-4 space-y-2">
        <a href="/student/dashboard.html" class="nav-item flex items-center">
          <i class="fas fa-home mr-3"></i>我的课程
        </a>
        <a href="/student/lab.html" class="nav-item flex items-center">
          <i class="fas fa-flask mr-3"></i>实验环境
        </a>
        <a href="/student/assignments.html" class="nav-item flex items-center">
          <i class="fas fa-tasks mr-3"></i>作业管理
        </a>
        <a href="/student/profile.html" class="nav-item active flex items-center">
          <i class="fas fa-user mr-3"></i>个人资料
        </a>
      </nav>
    </aside>

    <!-- 主要内容区 -->
    <main class="flex-1 p-8">
      <div class="flex justify-between items-center mb-8">
        <h1 class="text-2xl font-bold text-gray-800">个人资料</h1>
      </div>

      <!-- 个人信息卡片 -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <!-- 基本信息 -->
        <div class="md:col-span-2">
          <div class="card">
            <h2 class="text-xl font-bold text-gray-800 mb-6">基本信息</h2>
            <div class="space-y-6">
              <div class="flex items-center space-x-4">
                <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&h=100&q=80" 
                     alt="头像" 
                     class="w-24 h-24 rounded-full object-cover">
                <button class="btn btn-outline">更换头像</button>
              </div>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                  <input type="text" class="input" value="李同学" placeholder="请输入姓名">
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">学号</label>
                  <input type="text" class="input" value="2023001" readonly>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                  <input type="email" class="input" value="li@example.com" placeholder="请输入邮箱">
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">手机</label>
                  <input type="tel" class="input" value="13900139000" placeholder="请输入手机号">
                </div>
                <div class="md:col-span-2">
                  <label class="block text-sm font-medium text-gray-700 mb-1">个人简介</label>
                  <textarea class="input h-24" placeholder="请输入个人简介">数据库系统专业大三学生，对数据库优化和设计有浓厚兴趣。</textarea>
                </div>
              </div>
              <div class="flex justify-end">
                <button class="btn btn-primary">保存更改</button>
              </div>
            </div>
          </div>
        </div>

        <!-- 账号设置 -->
        <div class="md:col-span-1">
          <div class="card">
            <h2 class="text-xl font-bold text-gray-800 mb-6">账号设置</h2>
            <div class="space-y-6">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">当前密码</label>
                <input type="password" class="input" placeholder="请输入当前密码">
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">新密码</label>
                <input type="password" class="input" placeholder="请输入新密码">
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">确认新密码</label>
                <input type="password" class="input" placeholder="请再次输入新密码">
              </div>
              <div class="flex justify-end">
                <button class="btn btn-primary">修改密码</button>
              </div>
            </div>
          </div>

          <!-- 通知设置 -->
          <div class="card mt-6">
            <h2 class="text-xl font-bold text-gray-800 mb-6">通知设置</h2>
            <div class="space-y-4">
              <div class="flex items-center justify-between">
                <span class="text-gray-700">作业提醒</span>
                <label class="switch">
                  <input type="checkbox" checked>
                  <span class="slider"></span>
                </label>
              </div>
              <div class="flex items-center justify-between">
                <span class="text-gray-700">实验通知</span>
                <label class="switch">
                  <input type="checkbox" checked>
                  <span class="slider"></span>
                </label>
              </div>
              <div class="flex items-center justify-between">
                <span class="text-gray-700">系统消息</span>
                <label class="switch">
                  <input type="checkbox">
                  <span class="slider"></span>
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</body>
</html>